<template>
  <div class="home-page" id="home-page">
    <stickClassify :visible="targetIsVisible" @change="handChange" />
    <div ref="target">
      <swiper />
      <classify @change="handChange" />
    </div>
    <user />
    <hor />
    <list ref="listRef" />
  </div>
</template>
<script setup lang="ts">
import Swiper from './components/homeSwiper.layout.vue'
import Classify from './components/homeClassify.layout.vue'
import stickClassify from './components/stickClassify.vue'
import User from './components/user.layout.vue'
import Hor from './components/hor.layout.vue'
import List from './components/list.layout.vue'
import type { TabListItem } from '@/types/page/tab'
import { useKeep } from '@/hooks/useKeep'
const target = ref(null)
const targetIsVisible = useElementVisibility(target)
defineOptions({
  name: 'Home'
})
const listRef = ref()
const handChange = (e: TabListItem) => {
  listRef.value.tabChange(e)
}
/**
 * 保存页面滚动位置
 * */
useKeep()
</script>

<style lang="scss" scoped>
.home-page {
  min-width: 850px;
  background: rgba(255, 255, 255, 0.29);
  position: relative;
}
@media (max-width: 800px) {
  .home-page {
    min-width: 100%;
  }
}
</style>
